<template>
  <div class="page-container login-page">
    <el-card class="login-card">
      <template #header>
        <h2 class="text-center">登录</h2>
      </template>
      
      <el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="handleSubmit">        <el-form-item prop="email">
          <el-input v-model="form.email" placeholder="邮箱">
            <template #prefix>
              <el-icon><Message /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" native-type="submit" :loading="loading" class="submit-btn">
            登录
          </el-button>
        </el-form-item>

        <div class="register-section">
          <span class="register-text">还没有账号？</span>
          <router-link to="/register" class="register-link">
            <el-button type="primary" text class="register-btn">
              立即注册
              <el-icon class="register-icon"><arrow-right /></el-icon>
            </el-button>
          </router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { Message, Lock, ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'LoginView',
  components: {
    Message,
    Lock,
    ArrowRight
  },
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const formRef = ref()
    const loading = ref(false)
    const form = reactive({
      email: '',
      password: ''
    })

    const validateEmail = (_, value, callback) => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else if (!emailRegex.test(value)) {
        callback(new Error('请输入有效的邮箱地址'))
      } else {
        callback()
      }
    }

    const rules = {
      email: [
        { required: true, validator: validateEmail, trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码至少6个字符', trigger: 'blur' }
      ]
    }
    
    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        await userStore.login(form.email, form.password)
        router.push('/')
      } catch (error) {
        console.error('Login error:', error)
      } finally {
        loading.value = false
      }
    }

    return {
      form,
      rules,
      formRef,
      loading,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--background-color);
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.register-section {
  margin-top: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.register-text {
  color: var(--el-text-color-secondary);
}

.register-link {
  text-decoration: none;
}

.register-btn {
  font-size: 14px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.register-btn:hover {
  color: var(--el-color-primary-light-3);
  transform: translateX(4px);
}

.register-icon {
  margin-left: 2px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.register-btn:hover .register-icon {
  transform: translateX(4px);
}

.submit-btn {
  width: 100%;
}
</style>
